<template>
	<view class="home">
		<view class="syspadding navbar" :class=" isColor?'navcolor':'' ">
			<view class="acea-row row-middle row-between" style="padding: 0 30rpx;margin-top: 20rpx;">
				<view class="search acea-row row-middle">
					<text>请输入想要搜索的功能/服务</text>
				</view>
				<view class="code">
					<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/fec403cd6ada09950d224a833917a408.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="homebg">
			<view class="gundong-nav acea-row row-middle">
				<swiper class="text" :current="ncurrent" :indicator-dots="false" :autoplay="true" :interval="4000" :duration="500" :vertical="true" :circular="true" @change="textchange" >
					<swiper-item v-for="(item,index) in tipslist" :key="index">
						<view class="swiper-item acea-row row-middle">
							<view class="title" :class="className">{{ item }}</view>
							<!-- <view class="title" :class="ncurrent==index?'gun':''" :style="'animation-duration:'+ duration ">{{ item }}</view> -->
						</view>
					</swiper-item>
				</swiper>
<!-- 				<view class="text acea-row row-middle">
					<view class="title gun">国务院发布《关于提高个人所得税有关专项附加扣除标准的通知》</view>
				</view> -->
			</view>
		</view>
		<view class="mianbg">
			<view class="poster" @click="pathClick('/pages/index/bigmix')">
				<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/7d8d4788bed47f43aff9682e0f95c8c4.png" mode=""></image>
			</view>
			<view class="px30 zhongdian-nav" style="margin-top: 50rpx;" >
				<view class="zhongdian bold">重点服务推荐</view>
				<view class="zdpic" @click="pathClick('/pages/index/xgzhengce')">
					<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/413bcdf41fd731429cc62eeecc7b7474.png" mode=""></image>
				</view>
			</view>
			<view class="caidan">
				<scroll-view scroll-x="true" class="scroll-white acea-row">
					<view class="item" v-for="(item,index) in caidanlist" :key="index" @click="pathClick(item.link)">
						<image class="imgwh" :src="item.image" mode=""></image>
					</view>
				</scroll-view>
			</view>
			
			<view class="swiper-nav">
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="getCurrent">
					<swiper-item v-for="(item,index) in banner" :key="index">
						<view class="swiper-item">
							<image class="imgwh" :src="item" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
<!-- 				<view class="dots-box acea-row row-middle row-center">
					<view class="dots-nav acea-row row-middle row-center">
						<block v-for="(dot,din) in banner" :key="din">
							<view class="dot" :class="din==current?'on':''"></view>
						</block>
					</view>
				</view> -->
			</view>
			
			<view class="meun-list px30">
				<view class="acea-row row-middle">
					<view v-for="(item,index) in meunlist" :key="index" @click="meunclick(item.id,index)">
						<view class="icon" v-if="meunid == item.id">
							<image class="imgwh" :src="item.icon" mode=""></image>
						</view>
						<view class="item" v-else>{{ item.name }}</view>
					</view>
				</view>
				<view class="data-nav">
					<block v-for="(item,index) in datalist" :key="index">
						<view class="one-item acea-row row-between-wrapper" v-if="index<2">
							<view class="left" :style="{backgroundImage: 'url(' + item.left + ')'}">
								<view class="text acea-row row-column-between">
									<view class="title bold line3" v-html="item.title"></view>
									<view class="acea-row row-middle">
										<image class="time-icon" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/86f57028137d7e12ac32191a37a0d1d2.png" mode="aspectFit"></image>
										<text class="time">{{ item.time }}</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image class="imgwh" :src="item.right" mode=""></image>
							</view>
						</view>
						<view v-else class="two-item acea-row row-between-wrapper">
							<view class="left">
								<image class="imgwh" :src="item.right" mode=""></image>
							</view>
							<view class="right acea-row row-right" :style="{backgroundImage: 'url(' + item.left + ')'}">
								<view class="text acea-row row-column-between">
									<view class="title bold line3" v-html="item.title"></view>
									<view class="acea-row row-middle">
										<image class="time-icon" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/86f57028137d7e12ac32191a37a0d1d2.png" mode="aspectFit"></image>
										<text class="time">{{ item.time }}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
					<view class="acea-row row-middle row-center more">
						<text>查看更多</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
			</view>
			
			<view class="footer"></view>
			
		</view>
		
		
		<!-- <view style="width: 100%;height: 200rpx;"></view> -->
		<tabbar :url="'/pages/index/index'"></tabbar>
		
		<!-- #ifdef APP-PLUS -->
		<app-update v-if="!privacyStatus" ref="appUpdate" :force="true" :tabbar="false"></app-update>
		<view class="privacy-wrapper" v-if="privacyStatus">
			<view class="privacy-box">
				<view class="title">{{$t(`服务协议与隐私政策`)}}</view>
				<view class="content">
					{{$t(`请务必审慎阅读、充分理解“服务协议与 隐私政策”各条款，包括但不限于：为了 向你提供即时通讯、内容分享等服务，我 们需要收集你的设备信息、操作日志等个 人信息。你可以在“设置”中查看、变更、删除个人信息并管理你的授权。`)}}<br>
					{{$t(`你可以阅读`)}}
					<navigator url="/pages/users/privacy/index?type=3">{{$t(`《服务协议与隐私政策》`)}}</navigator>
					{{$t(`了解详细信息。如你同意，请点击“我同意”开始接受我们的服务。`)}}
				</view>
				<view class="btn-box">
					<view class="btn-item" @click="confirmApp">{{$t(`我同意`)}}</view>
					<view class="btn" @click="closeModel">{{$t(`残忍拒绝`)}}</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	const app = getApp();
	import appUpdate from "@/components/update/app-update.vue";
	import tabbar from '@/components/tabbar.vue'
	export default {
		components:{
			appUpdate,
			tabbar
		},
		props:{
			isColor:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				privacyStatus: false,
				tipslist:[
					"关于近期虚假退税宣传的温馨提示",
					"国务院发布《关于提高个人所得税有关专项附加扣除标准的通知》",
					"国家税务总局关于贯彻执行提高个人所得税有关专项附加扣除标准政策的公告（付解读）"
				],
				banner:[
					require('@/static/pic/lunbo01.jpg'),
					'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/be0ce90c2a067d0428baad434ed8196e.png',
					'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/b1e5e39c26c8a132d0c8f86558a26157.png',
					'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/6d7a325759e125f3c2cd4e473e6cdb5f.png',
					require('@/static/pic/lunbo02.jpg')
				],
				current:0,
				meunlist:[
					{ 
						name:'警示案例',
						icon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/66e19cce4d02af7a5d12939abe621e8a.png',
						id:1,
					},
					{
						name:'热点问题',
						icon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/d7747ca7f9d47306993fe16f25df85c7.png',
						id:2,
					},
					{
						name:'通知公告',
						icon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/5db9212edf6ff356d98ed50033ea99ed.png',
						id:3,
					},
					{
						name:'政策解读',
						icon:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/8b42085ef7efa7326cb0a974c23c2701.png',
						id:4,
					},
				],
				meunid:1,
				anlilist:[
					{ 
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/aae891ffbd88ab0143234ff1d9189610.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/a31b5abdd4e4179fd3298faddcd32490.png',
						title:'重庆市税务局第七稽查局查处一起未依法办理个人所得税综合所得汇算清缴案件',
						time:'2023-12-07'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/aae891ffbd88ab0143234ff1d9189610.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/f51f62282b2e09bf265bbfa5854031d8.png',
						title:'北京市税务局第三稽查局查处一起未依法办理个人所得税综合所得汇算清缴案件（2022年11月21日发布）',
						time:'2023-12-07'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/c277e207748fe1b5c6bad717826c6839.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/14bcbcf293ee58de79efb21c815c8d66.png',
						title:'办理汇算想便捷 APP密码要牢记',
						time:'2023-12-07'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/c277e207748fe1b5c6bad717826c6839.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/ba553b6854d147e46036ca54cd5c6c75.png',
						title:'获取退税想及时 准确卡号必须有',
						time:'2023-12-07'
					},
				],
				hotlist:[
					{ 
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/aae891ffbd88ab0143234ff1d9189610.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/860fd863e030244f387b735d007669b4.png',
						title:'哪些人需要办理2022年度个人所得税综合所得年度汇算？',
						time:'2023-02-07'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/aae891ffbd88ab0143234ff1d9189610.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/06660514b88944f2ae1aae3887793b17.png',
						title:'纳税人应在什么时候办理 <br/> 2022年度个人所得税综合所得年度汇算？',
						time:'2023-02-07'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/c277e207748fe1b5c6bad717826c6839.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/5b57f5ac4b7d61d0d5b6e83bf1a8ccb6.png',
						title:'纳税人可通过什么渠道办理2022年度个人所得税综合所得年度汇算？',
						time:'2023-02-07'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/c277e207748fe1b5c6bad717826c6839.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/2a3290be27f4a8d3d9b99612a1addb32.png',
						title:'纳税人可自主选择哪些办理方式来办理2022年度个人所得税综合所得年度汇算？',
						time:'2023-02-07'
					},
				],
				noticelist:[
					{ 
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/aae891ffbd88ab0143234ff1d9189610.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/c4b8cedb48cb4fed2c38cc0ce27894ca.png',
						title:'关于税款缴纳功能有关事项的温馨提示',
						time:'2023-12-29'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/aae891ffbd88ab0143234ff1d9189610.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/9b3e5f015f612af8c37ad5f1bee55e22.png',
						title:'关于近期虚假退税宣传的温馨提示',
						time:'2023-11-23'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/c277e207748fe1b5c6bad717826c6839.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/fc66200533fa35fd553f5cbe46c9fc8b.png',
						title:'关于个人养老金扣除信息管理功能的温馨提示',
						time:'2023-10-13'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/c277e207748fe1b5c6bad717826c6839.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/fed40212539883b566e67ca846009608.png',
						title:'国务院发布《关于提高个人所得税有关专项附加扣除标准的通知》',
						time:'2023-08-31'
					},
				],
				policylist:[
					{ 
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/aae891ffbd88ab0143234ff1d9189610.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/9a5652e6fd0138591bceb91680c55511.png',
						title:'人力资源社会保障部办公厅财政部办公厅 国家税务总局办公厅关于公布个人养老金先行城市（地区）的通知',
						time:'2023-11-17'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/aae891ffbd88ab0143234ff1d9189610.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/c5e0a93fd580a296cf77825d34561f06.png',
						title:'财务部 税务局关于个人养老金有关个人所得税政策的公告',
						time:'2023-11-03'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/c277e207748fe1b5c6bad717826c6839.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/17e73a29a568992d220feda52641e0ed.png',
						title:'国家税务总局关于办理2022年度个人所得税综合所得汇算清缴事项的公告',
						time:'2023-02-02'
					},
					{
						left:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/c277e207748fe1b5c6bad717826c6839.png',
						right:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/878a6b7960d91c131b08415857eaade3.png',
						title:'财务部 税务总局关于延续实施有关个人所得税优惠政策的公告',
						time:'2023-01-16'
					},
				],
				datalist:[],
				caidanlist:[
					{
						image:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/05489c5468d2419bf7857aaa53f011f6.png',
						link:'/pages/index/bill_check',
					},
					{
						image:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/0856dca7fffdfdf1469615322ae1080f.png',
						link:'/pages/index/bill-Issue',
					},
					{
						image:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/b62ae791d4eff92afb815cbb0a6179eb.png',
						link:'/',
					},
					{
						image:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/576b08766c756c77d0908aeaa5ef0f38.png',
						link:'/',
					},
				],
				time:"",
				tcurrent:0,
				ncurrent:0,
				duration: '',
				className: '' // 初始的类名
			};
		},
		mounted() {
			this.datalist = this.anlilist;
			this.className = ` newClassName`;
		},
		methods:{ 
			textchange(e){
				this.ncurrent = e.detail.current;
				this.className = 'default';
				setTimeout(()=>{
					this.className = `newClassName`;
				},1200)
			},
			pathClick(url){
				if( url == '/' ) return this.$util.Tips({ title:'功能开发中' })
				uni.navigateTo({
					url: url
				})
			},
			meunclick(id){
				this.meunid = id;
				if( id == 1 ) return this.datalist = this.anlilist;
				if( id == 2 ) return this.datalist = this.hotlist;
				if( id == 3 ) return this.datalist = this.noticelist;
				if( id == 4 ) return this.datalist = this.policylist;
			},
			getCurrent(e){
				this.current = e.detail.current;
			},
			// #ifdef APP-PLUS
			// 同意隐私协议
			confirmApp() {
				uni.setStorageSync('privacyStatus', true)
				this.privacyStatus = false
			},
			// 关闭Model
			closeModel() {
				//退出app
				uni.getSystemInfo({
					success: function(res) { // 判断为安卓的手机 
						if (res.platform == 'android') { // 安卓退出app      
							plus.runtime.quit();
						} else { // 判断为ios的手机，退出App      
							plus.ios.import("UIApplication").sharedApplication().performSelector("exit");
			
						}
					}
				})
			},
			// #endif
		}
	}
</script>
 
<style lang="scss">
	.home{
		
		.navbar{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			padding-bottom: 10rpx;
			z-index: 9999;
			// padding: 10rpx 30rpx;
			
			&.navcolor{
				background-image: linear-gradient(to right,#0562ED,#1B6EF0,#367DF3,#4286F5);
			}
			
			.search{
				width: 620rpx;
				height: 66rpx;
				background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240111/8e8f06a6762d384a3e2bc5331f5101f4.png');
				background-size: 100% 100%;
				
				text{
					color: #ffffff;
					font-size: 30rpx;
					margin-left: 70rpx;
				}
			}
			.code{
				width: 55rpx;
				height: 55rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			
		}
		
		.homebg{
			width: 100%;
			height: 740rpx;
			background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240115/8b35c634d3dd666be6d2f88051ba7dfa.jpg');
			background-size: 100% 100%;
			padding-top: 190rpx;
			
			.gundong-nav{
				width: 690rpx;
				height: 80rpx;
				background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/ae39023719f67a1c1465bc7db8196f4c.png');
				background-size: 100% 100%;
				margin: 0 auto;
				
				.text{
					width: 600rpx;
					height: 80rpx;
					// border: 1rpx solid red;
					margin-left: 80rpx;
					overflow: hidden;
					
					.swiper-item{
						width: 100%;
						height: 100%;
					}
					
				}
				.title{
					width: 600rpx; /* 设置容器宽度 */
					white-space: nowrap; /* 不换行 */
					// overflow: hidden; /* 超出部分隐藏 */
					// animation: scrollText 5s linear infinite; /* 应用动画并无限重复 */
					font-size: 30rpx;
					color: #A98D40;
					letter-spacing: 2rpx;
				}
				
				.gun{
					animation: scrollText linear infinite;
				}
				.newClassName{
					animation: scrollText 5s linear infinite;
				}
			}
			
			@keyframes scrollText {
				0% { transform: translateX(0); } /* 初始位置为左侧起点 */
				100% { transform: translateX(-100%); } /* 结束位置为右侧边界外 */
			}
		}
		
		.mianbg{
			width: 100%;
			height: 100%;
			// background-image: linear-gradient(to bottom,#ABC7F7,2%, #CDDEF9 2%, #F4F5FE, #F5F6FB 40%, #F7F8FC );
			// padding: 0 30rpx 0 30rpx;
			
			.poster{
				width: 690rpx;
				height: 380rpx;
				margin: -450rpx auto 0 auto;
			}
			
			.zhongdian-nav{
				background-image: linear-gradient(to bottom, #ffffff, #F5F6FA);
			}
			.zhongdian{
				font-size: 30rpx;
				color: #17181B;
			}
			.zdpic{
				width: 690rpx;
				height: 300rpx;
				margin-top: 30rpx;
			}
			.caidan{
				// width: 690rpx;
				// height: 200rpx;
				margin: 30rpx 0 30rpx 30rpx;
				
				.scroll-white{
					white-space: nowrap;
					width: 100%;
					height: 240rpx;
					
					// .item~.item{
					// 	margin-left: 20rpx;
					// }
					.item{
						display: inline-block;
						width: 200rpx;
						height: 240rpx;
						margin-right: 20rpx;
					}
					.item:last-child{
						margin-right: 30rpx;
					}
				}
			}
		
			.swiper-nav{
				width: 690rpx;
				height: 200rpx;
				position: relative;
				margin: 30rpx auto 0 auto;
				
				.swiper,.swiper-item{
					width: 100%;
					height: 100%;
				}
				.dots-box{
					position: absolute;
					bottom: 30rpx;
					left: 0;
					right: 0;
					
					.dots-nav{
						height: 8rpx;
						background-color: rgba(255,255,255,.5);
						border-radius: 8rpx;
						
						.dot{
							width: 40rpx;
							height: 10rpx;
							
							&.on{
								background-color: #ffffff;
								border-radius: 8rpx;
							}
						}
					}
				}
				
			}
		
			.meun-list{
				margin-top: 30rpx;
				
				.item{
					margin-right: 20rpx;
					color: #5D5E61;
					font-size: 30rpx;
					width: 120rpx;
				}
				.icon{
					width: 120rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		
			.data-nav{
				padding: 30rpx 0 0 0;
				
				.more{
					color: #999999;
					font-size: 28rpx;
					
					.icon-xiangyou{
						font-size: 26rpx;
						font-weight: bold;
						margin-left: 10rpx;
					}
				}
				
				.one-item{
					margin-bottom: 30rpx;
					
					.left{
						width: 520rpx;
						height: 220rpx;
						background-size: 100% 100%;
						padding: 30rpx;
					}
					.right{
						width: 280rpx;
						height: 180rpx;
						margin-left: -160rpx;
					}
					.text{
						width: 360rpx;
						height: 100%;
						// word-break: break-all;
						// border: 1rpx solid red;
						
						.time-icon{
							width: 28rpx;
							height: 28rpx;
							display: block;
						}
						.time{
							color: #9F9F9F;
							font-size: 26rpx;
							margin-left: 10rpx;
							display: block;
						}
						.title{
							font-size: 28rpx;
							color: #282828;
							letter-spacing: 4rpx;
						}
					}
				}
				.two-item{
					margin-bottom: 30rpx;
					
					.left{
						width: 280rpx;
						height: 180rpx;
						margin-right: -160rpx;
					}
					.right{
						width: 520rpx;
						height: 220rpx;
						background-size: 100% 100%;
						padding: 30rpx;
					}
					.text{
						width: 370rpx;
						height: 100%;
						
						.time-icon{
							width: 28rpx;
							height: 28rpx;
							display: block;
						}
						.time{
							color: #9F9F9F;
							font-size: 26rpx;
							margin-left: 10rpx;
							display: block;
						}
						.title{
							font-size: 28rpx;
							color: #282828;
							letter-spacing: 4rpx;
						}
					}
				}
				
				
			}
		
			.footer{
				background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240113/744875e972b9ea554a9b810e99352332.png');
				background-size: 100% 100%;
				width: 100%;
				height: 300rpx;
			}
		
		}
		


		
	}
</style>
